<template>
  <div class="pan-quick-search">
    <!-- 搜索区域 -->
    <el-card class="search-card" :body-style="{ padding: '15px' }">
      <div class="search-container">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入关键词"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        />

        <el-select
          v-model="searchForm.resType"
          placeholder="网盘类型"
          class="search-select"
        >
          <el-option label="全部" value="dalipan" />
          <el-option label="百度网盘" value="baidu" />
          <el-option label="夸克网盘" value="quark" />
          <el-option label="迅雷网盘" value="xunleipan" />
          <el-option label="阿里云盘" value="aliyundrive" />
        </el-select>

        <el-button type="primary" @click="handleSearch" class="search-button">
          搜索
        </el-button>

        <el-button
          type="text"
          @click="toggleAdvancedOptions"
          class="advanced-button"
        >
          {{ advancedOptionsVisible ? "收起高级选项" : "高级选项 ▼" }}
        </el-button>
      </div>

      <!-- 高级筛选 -->
      <div class="advanced-filters" v-if="advancedOptionsVisible">
        <el-select
          v-model="searchForm.category"
          placeholder="文件分类"
          class="filter-select"
        >
          <el-option label="全部" value="0" />
          <el-option label="视频" value="1" />
          <el-option label="音乐" value="2" />
          <el-option label="图片" value="3" />
          <el-option label="文档" value="4" />
          <el-option label="软件" value="5" />
          <el-option label="压缩包" value="6" />
          <el-option label="BT种子" value="7" />
        </el-select>

        <el-select
          v-model="searchForm.diffDay"
          placeholder="时间范围"
          class="filter-select"
        >
          <el-option label="最近7天" value="7" />
          <el-option label="最近30天" value="30" />
          <el-option label="最近90天" value="90" />
          <el-option label="最近365天" value="365" />
        </el-select>

        <div class="size-range">
          <span class="size-label">文件大小:</span>
          <el-input
            v-model="searchForm.minSize"
            placeholder="最小(KB)"
            type="number"
            class="size-input"
            @input="convertSizeToBytes('min')"
          />
          <span class="size-separator">-</span>
          <el-input
            v-model="searchForm.maxSize"
            placeholder="最大(KB)"
            type="number"
            class="size-input"
            @input="convertSizeToBytes('max')"
          />
        </div>

        <el-select
          v-model="searchForm.searchType"
          placeholder="搜索类型"
          class="filter-select"
        >
          <el-option label="模糊搜索" value="match" />
          <el-option label="精确搜索" value="precise" />
        </el-select>

        <el-input
          v-model="searchForm.extensions"
          placeholder="文件类型（如: pdf,doc,mp4，多个用逗号分隔）"
          class="filter-input"
          clearable
        >
          <template #prepend>扩展名</template>
        </el-input>
      </div>
    </el-card>

    <!-- 搜索统计 -->
    <el-card class="stats-card" :body-style="{ padding: '15px' }">
      <div class="stats-container">
        <span class="stat-item"
          >总扫描数:
          {{
            searchResult.search_stats?.total_scanned ||
            searchResult.total_scanned ||
            0
          }}</span
        >
        <span class="stat-item">|</span>
        <span class="stat-item"
          >当前页结果: {{ searchResult.total_scanned || 0 }}</span
        >
        <span class="stat-item">|</span>
        <span class="stat-item">总结果数: {{ searchResult.total || 0 }}</span>
        <span class="stat-item">|</span>
        <span class="stat-item"
          >搜索耗时:
          {{ (searchResult.search_stats?.search_time || 0).toFixed(2) }}秒</span
        >
        <span class="stat-item">|</span>
        <span class="stat-item"
          >错误数: {{ searchResult.search_stats?.errors || 0 }}</span
        >
      </div>
    </el-card>

    <!-- 结果提示 -->
    <el-card
      class="result-hint-card"
      :body-style="{ padding: '15px' }"
      v-if="showNoResultHint"
    >
      <div class="hint-content">
        <p class="hint-title">
          系统扫描到
          {{
            searchResult.search_stats?.total_scanned ||
            searchResult.total_scanned ||
            0
          }}
          个文件，但经过质量筛选后暂无推荐结果
        </p>
        <p class="hint-suggestion">您可以尝试调整搜索条件，如：</p>
        <ul class="suggestion-list">
          <li>• 使用更具体的关键词</li>
          <li>• 调整文件大小范围</li>
          <li>• 选择不同的时间范围</li>
        </ul>
      </div>
    </el-card>

    <!-- 搜索结果 -->
    <el-card class="results-card" :body-style="{ padding: '15px' }">
      <DynamicTable
        ref="tableRef"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        :pagination="pagination"
        :showToolbar="false"
        border
        @current-page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template #filelist="{ row }">
          <div
            v-for="file in row.filelist"
            :key="file.id"
            style="
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              gap: 6px;
              cursor: pointer;
            "
            @click="handleOpenDetail(row)"
          >
            <span style="color: #005bcd">- {{ file.filename }}</span>
            <span>{{ file.size }}</span>
            <span>{{
              file.isdir === 1 || file.isdir === "1" ? "文件夹" : "文件"
            }}</span>
          </div>
        </template>
        <!-- 操作列插槽 -->
        <template #action="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleOpenDetail(row)"
            style="margin-right: 8px"
          >
            详情
          </el-button>
          <el-button
            type="success"
            size="small"
            @click="handleOpenConfirm(row)"
          >
            确认
          </el-button>
        </template>
      </DynamicTable>
    </el-card>

    <!-- 操作提示 -->
    <el-card class="operation-hint-card" :body-style="{ padding: '15px' }">
      <div class="operation-hint">
        <p>ℹ️ 快速搜索为体验功能，搜索结果仅供参考</p>
        <p>点击"确认"按钮后文件信息才会正式入库进行监控</p>
      </div>
    </el-card>

    <!-- 确认入库弹窗 -->
    <ConfirmDialog
      v-model="confirmDialogVisible"
      title="确认入库"
      :fields="singleConfirmFields"
      :initial-form="confirmForm"
      :rules="singleConfirmRules"
      @confirm="handleSingleConfirm"
    />

    <!-- 批量确认弹窗 -->
    <ConfirmDialog
      v-model="batchConfirmDialogVisible"
      title="批量确认入库"
      :fields="batchConfirmFields"
      :initial-form="batchConfirmForm"
      :rules="batchConfirmRules"
      @confirm="handleBatchConfirm"
    />

    <!-- 资源详情弹窗 -->
    <ResourceDetailDialog
      v-model="detailDialogVisible"
      :resource-id="currentResourceId"
      :resource-type="currentResourceType"
      :keyword="searchForm.keyword"
      title="资源详情"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import DynamicTable from "@/components/DynamicTable/index.vue";
import type { TableColumn } from "@/components/DynamicTable/types";
import ConfirmDialog from "./components/ConfirmDialog.vue";
import ResourceDetailDialog from "./components/ResourceDetailDialog.vue";
import {
  quickSearch,
  confirmResource,
  batchConfirmResources,
} from "../../servers";

// 搜索表单数据
const searchForm = reactive({
  keyword: "",
  page: 1,
  category: "0",
  diffDay: "30",
  searchType: "match",
  resType: "dalipan",
  minSize: "",
  maxSize: "",
  extensions: "", // 文件扩展名，多个用逗号分隔
  // 内部使用的字节数
  _minSizeBytes: 0,
  _maxSizeBytes: 0,
});

// 高级选项是否可见
const advancedOptionsVisible = ref(false);

// 搜索结果数据
const searchResult = reactive({
  results: [] as any[],
  total: 0, // 总结果数
  total_scanned: 0, // 当前页扫描到的文件数
  search_stats: {
    total_scanned: 0, // 总扫描数
    search_time: 0, // 搜索耗时（秒）
    errors: 0, // 错误数
    high_risk_count: 0,
    medium_risk_count: 0,
    low_risk_count: 0,
  },
  search_time: "",
  search_id: "",
  message: "",
});

// 表格数据和配置
const tableData = ref<any[]>([]);
const tableRef = ref<any>(null);
const loading = ref(false);
const selectAll = ref(false);
const selectedItems = ref<any[]>([]);

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 表格列配置
const tableColumns: TableColumn[] = [
  {
    label: "文件名",
    prop: "filelist",
    show: true,
    slot: "filelist",
    key: "filelist",
    minWidth: 200,
  },
  {
    label: "大小",
    prop: "size",
    show: true,
    key: "size",
    width: 120,
    formatter: (row: any) => {
      if (!row.size) return "未知";
      const size = row.size;
      if (size < 1024) return `${size}B`;
      if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
      if (size < 1024 * 1024 * 1024)
        return `${(size / (1024 * 1024)).toFixed(1)}MB`;
      return `${(size / (1024 * 1024 * 1024)).toFixed(1)}GB`;
    },
  },
  {
    label: "类型",
    prop: "type",
    show: true,
    key: "type",
    width: 100,
    formatter: (row: any) => {
      const typeMap: Record<string, string> = {
        baidu: "百度网盘",
        quark: "夸克网盘",
        xunleipan: "迅雷网盘",
        aliyundrive: "阿里云盘",
      };
      return typeMap[row.type] || row.type || "-";
    },
  },
  {
    label: "文件分类",
    prop: "category",
    show: true,
    key: "category",
    width: 100,
    formatter: (row: any) => {
      const categoryMap: Record<number, string> = {
        0: "全部",
        1: "视频",
        2: "音乐",
        3: "图片",
        4: "文档",
        5: "软件",
        6: "压缩包",
        7: "BT种子",
      };
      return categoryMap[row.category] || "-";
    },
  },
  {
    label: "是否目录",
    prop: "isdir",
    show: true,
    key: "isdir",
    width: 90,
    formatter: (row: any) => {
      return row.isdir === 1 || row.isdir === "1" ? "是" : "否";
    },
  },
  {
    label: "更新时间",
    prop: "updatetime",
    show: true,
    key: "updatetime",
    width: 160,
  },
  {
    label: "创建时间",
    prop: "ctime",
    show: true,
    key: "ctime",
    width: 160,
  },
  {
    label: "用户ID",
    prop: "user",
    show: true,
    key: "user",
    width: 120,
  },
  {
    label: "操作",
    prop: "action",
    width: 150,
    show: true,
    key: "action",
    slot: "action",
    fixed: "right",
  },
];

// 单个确认表单配置
const confirmDialogVisible = ref(false);
const confirmForm = reactive({
  filename: "",
  resource_id: "",
  resource_type: "",
  keyword: "",
  responsible_department: "",
  responsible_person: "",
  confirm_reason: "确认入库",
});

const singleConfirmFields = [
  {
    label: "文件名称",
    prop: "filename",
    disabled: true,
    required: false,
  },
  {
    label: "责任部门",
    prop: "responsible_department",
    required: true,
  },
  {
    label: "责任人",
    prop: "responsible_person",
    required: true,
  },
  {
    label: "确认原因",
    prop: "confirm_reason",
    type: "textarea" as const,
  },
];

const singleConfirmRules = {
  responsible_department: [
    { required: true, message: "请输入责任部门", trigger: "blur" },
  ],
  responsible_person: [
    { required: true, message: "请输入责任人", trigger: "blur" },
  ],
};

// 批量确认表单配置
const batchConfirmDialogVisible = ref(false);
const batchConfirmForm = reactive({
  selected_count: 0,
  responsible_department: "",
  responsible_person: "",
  confirm_reason: "批量确认入库",
});

// 资源详情弹窗配置
const detailDialogVisible = ref(false);
const currentResourceId = ref<string | null>(null);
const currentResourceType = ref<
  "baidu" | "quark" | "xunleipan" | "aliyundrive" | null
>(null);

const batchConfirmFields = [
  {
    label: "选择数量",
    prop: "selected_count",
    disabled: true,
    required: false,
  },
  {
    label: "责任部门",
    prop: "responsible_department",
    required: true,
  },
  {
    label: "责任人",
    prop: "responsible_person",
    required: true,
  },
  {
    label: "确认原因",
    prop: "confirm_reason",
    type: "textarea" as const,
  },
];

const batchConfirmRules = {
  responsible_department: [
    { required: true, message: "请输入责任部门", trigger: "blur" },
  ],
  responsible_person: [
    { required: true, message: "请输入责任人", trigger: "blur" },
  ],
};

// 是否显示无结果提示
const showNoResultHint = computed(() => {
  const totalScanned =
    searchResult.search_stats?.total_scanned || searchResult.total_scanned || 0;
  return totalScanned > 0 && searchResult.total === 0;
});

// 切换高级选项
const toggleAdvancedOptions = () => {
  advancedOptionsVisible.value = !advancedOptionsVisible.value;
};

// 转换大小为字节
const convertSizeToBytes = (type: "min" | "max") => {
  const value = type === "min" ? searchForm.minSize : searchForm.maxSize;
  if (value) {
    // 输入的是KB，转换为字节
    const bytes = parseInt(value) * 1024;
    if (type === "min") {
      searchForm._minSizeBytes = bytes;
    } else {
      searchForm._maxSizeBytes = bytes;
    }
  } else {
    if (type === "min") {
      searchForm._minSizeBytes = 0;
    } else {
      searchForm._maxSizeBytes = 0;
    }
  }
};

// 搜索
const handleSearch = async () => {
  if (!searchForm.keyword.trim()) {
    ElMessage.warning("请输入搜索关键词");
    return;
  }

  loading.value = true;
  try {
    // 处理文件扩展名：将逗号或空格分隔的字符串转换为数组
    let extensions: string[] | undefined = undefined;
    if (searchForm.extensions && searchForm.extensions.trim()) {
      extensions = searchForm.extensions
        .split(/[,，\s]+/)
        .map((ext) => ext.trim().replace(/^\./, "")) // 移除开头的点
        .filter((ext) => ext.length > 0);
      if (extensions.length === 0) {
        extensions = undefined;
      }
    }

    const params: any = {
      keyword: searchForm.keyword.trim(),
      page: pagination.currentPage,
      category: parseInt(searchForm.category),
      diffDay: parseInt(searchForm.diffDay),
      searchType: searchForm.searchType as "match" | "precise",
      resType: searchForm.resType as
        | "baidu"
        | "quark"
        | "xunleipan"
        | "aliyundrive",
      minSize: searchForm._minSizeBytes || undefined,
      maxSize: searchForm._maxSizeBytes || undefined,
    };

    // 如果有文件扩展名，添加到参数中
    if (extensions && extensions.length > 0) {
      params.extensions = extensions;
    }

    const result = await quickSearch(params);

    // 检查返回结果

    Object.assign(searchResult, result.data);

    // 处理表格数据
    tableData.value = (result.data.results || []).map((item: any) => ({
      ...item,
      selected: false,
    }));

    pagination.total = result.data.total || 0;
    // 更新分页总数
    if (result.data.total !== undefined) {
      pagination.total = result.data.total;
    }
    selectedItems.value = [];
    selectAll.value = false;
  } catch (error: any) {
    ElMessage.error(error?.message || "搜索失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 刷新
const handleRefresh = () => {
  if (searchForm.keyword.trim()) {
    handleSearch();
  } else {
    ElMessage.info("请先输入关键词进行搜索");
  }
};

// 分页变更
const handlePageChange = (page: number) => {
  pagination.currentPage = page;
  searchForm.page = page;
  if (searchForm.keyword.trim()) {
    handleSearch();
  }
};

// 每页大小变更
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  searchForm.page = 1;
  if (searchForm.keyword.trim()) {
    handleSearch();
  }
};

// 全选
const handleSelectAll = (checked: boolean) => {
  tableData.value.forEach((row) => {
    row.selected = checked;
  });

  if (checked) {
    selectedItems.value = [...tableData.value];
  } else {
    selectedItems.value = [];
  }
};

// 行选择
const handleRowSelect = (row: any, checked: boolean | string | number) => {
  const isChecked = Boolean(checked);
  row.selected = isChecked;

  if (isChecked) {
    if (!selectedItems.value.some((item) => item.id === row.id)) {
      selectedItems.value.push(row);
    }
  } else {
    selectedItems.value = selectedItems.value.filter(
      (item) => item.id !== row.id
    );
  }

  // 更新全选状态
  selectAll.value = tableData.value.every((row) => row.selected);
};

// 打开资源详情弹窗
const handleOpenDetail = (row: any) => {
  currentResourceId.value = row.id;
  currentResourceType.value = searchForm.resType as
    | "baidu"
    | "quark"
    | "xunleipan"
    | "aliyundrive";
  detailDialogVisible.value = true;
};

// 打开单个确认弹窗
const handleOpenConfirm = (row: any) => {
  confirmForm.filename = row.filename;
  confirmForm.resource_id = row.id;
  confirmForm.resource_type = searchForm.resType;
  confirmForm.keyword = searchForm.keyword;
  confirmForm.responsible_department = "";
  confirmForm.responsible_person = "";
  confirmDialogVisible.value = true;
};

// 处理单个确认
const handleSingleConfirm = async (formData: any) => {
  const loadingInstance = ElLoading.service({ text: "正在确认入库..." });
  try {
    const rowData = tableData.value.find(
      (item) => item.id === formData.resource_id
    );

    const params = {
      search_id: `quick_${Date.now()}`,
      original_data: {
        id: formData.resource_id,
        filename: formData.filename,
        size: rowData?.size || 0,
        updatetime: rowData?.updatetime || "",
        url: rowData?.url || "",
      },
      keyword: formData.keyword,
      responsible_department: formData.responsible_department,
      responsible_person: formData.responsible_person,
      confirm_reason: formData.confirm_reason || "确认入库",
    };

    const result = await confirmResource(params);

    ElMessage.success(result.message || "确认入库成功");

    // 更新表格数据
    tableData.value = tableData.value.filter(
      (item) => item.id !== formData.resource_id
    );
    searchResult.total = Math.max(0, searchResult.total - 1);
  } catch (error: any) {
    ElMessage.error(error?.message || "确认入库失败");
  } finally {
    loadingInstance.close();
  }
};

// 打开批量确认弹窗
const handleOpenBatchConfirm = () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning("请先选择要确认的文件");
    return;
  }

  batchConfirmForm.selected_count = selectedItems.value.length;
  batchConfirmForm.responsible_department = "";
  batchConfirmForm.responsible_person = "";
  batchConfirmDialogVisible.value = true;
};

// 处理批量确认
const handleBatchConfirm = async (formData: any) => {
  try {
    const results = selectedItems.value.map((row) => ({
      search_id: `quick_${Date.now()}_${row.id}`,
      original_data: {
        id: row.id,
        filename: row.filename,
        size: row.size || 0,
        updatetime: row.updatetime || "",
        url: row.url || "",
      },
      keyword: searchForm.keyword,
    }));

    const params = {
      results,
      responsible_department: formData.responsible_department,
      responsible_person: formData.responsible_person,
      confirm_reason: formData.confirm_reason || "批量确认入库",
    };

    const result = await batchConfirmResources(params);

    if (result.code === 200 && result.data) {
      const confirmedCount = result.data.confirmed_count || 0;
      const totalCount = result.data.total_count || 0;

      ElMessage.success(`成功确认 ${confirmedCount}/${totalCount} 个文件`);

      // 更新表格数据
      const confirmedIds = selectedItems.value.map((item) => item.id);
      tableData.value = tableData.value.filter(
        (item) => !confirmedIds.includes(item.id)
      );
      searchResult.total = Math.max(0, searchResult.total - confirmedCount);
      selectedItems.value = [];
      selectAll.value = false;
    } else {
      ElMessage.error(result.message || "批量确认入库失败");
    }
  } catch (error: any) {
    ElMessage.error(error?.message || "批量确认入库失败");
  } finally {
  }
};

// 导出
const handleExport = () => {
  if (tableData.value.length === 0) {
    ElMessage.warning("没有可导出的数据");
    return;
  }

  // 导出功能：将表格数据转换为 CSV 格式并下载
  try {
    const headers = ["文件名", "大小", "更新时间"];
    const rows = tableData.value.map((item) => [
      item.filename || "",
      item.size
        ? item.size < 1024
          ? `${item.size}B`
          : item.size < 1024 * 1024
          ? `${(item.size / 1024).toFixed(1)}KB`
          : item.size < 1024 * 1024 * 1024
          ? `${(item.size / (1024 * 1024)).toFixed(1)}MB`
          : `${(item.size / (1024 * 1024 * 1024)).toFixed(1)}GB`
        : "未知",
      item.updatetime || "",
    ]);

    const csvContent =
      "\uFEFF" + // BOM for Excel
      headers.join(",") +
      "\n" +
      rows.map((row) => row.map((cell) => `"${cell}"`).join(",")).join("\n");

    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute(
      "download",
      `网盘快速查询结果_${new Date().toISOString().slice(0, 10)}.csv`
    );
    link.style.visibility = "hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);

    ElMessage.success("导出成功");
  } catch (error: any) {
    ElMessage.error("导出失败：" + (error?.message || "未知错误"));
  }
};
</script>

<style scoped lang="scss">
.pan-quick-search {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
  }

  .search-card,
  .stats-card,
  .result-hint-card,
  .results-card,
  .operation-hint-card {
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    .search-input {
      flex: 1;
      min-width: 200px;
    }

    .search-select {
      width: 140px;
    }

    .search-button {
      width: 80px;
    }

    .advanced-button {
      margin-left: auto;
      white-space: nowrap;
    }
  }

  .advanced-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;

    .filter-select {
      width: 140px;
    }

    .filter-input {
      width: 280px;
    }

    .size-range {
      display: flex;
      align-items: center;
      gap: 5px;

      .size-label {
        white-space: nowrap;
        color: #666;
      }

      .size-input {
        width: 80px;
      }

      .size-separator {
        color: #ccc;
      }
    }
  }

  .stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    color: #666;
    font-size: 14px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }

  .hint-content {
    color: #666;

    .hint-title {
      margin-bottom: 10px;
      font-weight: 500;
    }

    .hint-suggestion {
      margin: 10px 0;
      color: #333;
    }

    .suggestion-list {
      padding-left: 20px;
      margin: 5px 0;

      li {
        margin: 3px 0;
      }
    }
  }

  .results-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;

    .select-all {
      margin: 0;
    }

    .batch-button,
    .export-button {
      padding: 5px 15px;
    }
  }

  .operation-hint {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
  }

  // 响应式调整
  @media (max-width: 768px) {
    .search-container {
      flex-direction: column;
      align-items: stretch;

      .search-input,
      .search-select,
      .search-button,
      .advanced-button {
        width: 100%;
        margin-left: 0;
      }
    }

    .advanced-filters {
      flex-direction: column;
      align-items: stretch;

      .filter-select,
      .size-range {
        width: 100%;
      }

      .size-range {
        justify-content: flex-start;
      }
    }

    .results-toolbar {
      flex-wrap: wrap;
    }
  }
}
</style>
